<template>
	<div>
		<el-row>
			<el-button type="success">编辑</el-button>
			<el-input v-model="phone" @input="checkphone" />
			<!--启用或禁用按钮 disabled-->
			<el-button type="danger" :disabled="flag">警告</el-button>
			<!--通过size属性控制按钮大小 medium、small、mini-->
			<el-button type="text">不要删我</el-button>
			<el-button type="success" size="small">小型按钮</el-button>
			<el-radio v-model="sex" label="1" disabled>男</el-radio>
			<el-radio v-model="sex" label="2">女</el-radio>

			<el-radio-group v-model="job" size="small" border>
				<el-radio label="1">ui设计</el-radio>
				<el-radio label="2">美工</el-radio>
				<el-radio label="3">前端工程师</el-radio>
				<el-radio-button label="4">服务端工程师</el-radio-button>
			</el-radio-group>
			<!--如果复选框单个的存在那么返回的就是一个boolean值，
			 如果是以组的存在所有值都会放回到一个数组中-->
			<br>
			<el-checkbox v-model="cheked">
				吃饭
			</el-checkbox>
			<el-checkbox-group :max="2" :min="1" v-model="arry" @change="info">
				<el-checkbox label="1">
					跑步
				</el-checkbox>
				<el-checkbox label="2">
					打球
				</el-checkbox>
				<el-checkbox label="3">
					上网
				</el-checkbox>
			</el-checkbox-group>
		</el-row>
		<el-input-number :min="1" :precision="2" v-model="num1" @change="num" size="small" label="选择个数" :step="2"></el-input-number>
		<el-select v-model="value" placeholder="请选择国家" filterable clearable @change="getdata">
			<el-option v-for="item in country" :label="item.label" :value="item.value" :key="item.value" :disabled="item.disabled"></el-option>
		</el-select>

		<el-select size="small" v-model="value10" placeholder="请选择国家" filterable clearable allow-create multiple
		 default-first-option @change="getdata">
			<el-option v-for="item in country" :label="item.label" :value="item.value" :key="item.value" :disabled="item.disabled"></el-option>
		</el-select>


		<el-cascader :filterable="true" clearable :options="address" v-model="activeAddress" :props="{label:'name',value:'id'}"
		 expand-trigger="hover" @change="getAddress">
		</el-cascader>
		<br>
		<el-switch v-model="swtich" active-color="skyblue" inactive-color="gray" active-text="svip" inactive-text="普通用户"
		 active-value="1" inactive-value="0" :width="100" @change="getS">
		</el-switch>
		<!--vertical切换为纵向-->
		<el-slider v-model="slider" height="200px" show-input @change="getslider">
		</el-slider>
		<el-time-select @change="getTime" v-model="time" :picker-options="{
			start:'09:00',
			step:'00:30',
			end:'17:00'
		}"
		 placeholder="请选择时间">

		</el-time-select>
		<el-time-picker @change="getTime" v-model="picker" :picker-options="{
		 selectableRange:'09:00:00 - 17:00:00'
		}"
		 placeholder="请选择时间">

		</el-time-picker>
		<el-time-picker @change="getTime" v-model="strEnd" is-range range-separator="至" start-placeholder="开始时间"
		 end-placeholder="结束时间" placeholder="请选择时间范围">
		</el-time-picker>
		<el-date-picker v-model="date" align="right" type="date" placeholder="请选择日期范围" format="yyyy年MM月dd日" :picker-options="pickerOptions1">
		</el-date-picker>

		<el-date-picker v-model="dateTime" align="right" type="datetime" placeholder="请选择日期范围" format="yyyy-MM-dd HH:mm:ss"
		 :picker-options="pickerOptions1" value-format="timestamp" @change="getTime">
		</el-date-picker>

		<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="preview" :on-remove="remove"
		 :before-remove="beforeRemove" :on-success="uploadSuccess" :on-error="uploadError" :data="{'fileSystem':'food'}"
		 :limit="3" :on-exceed="getLength" multiple>
			<el-button size="small" type="primary">点击上传</el-button>
		</el-upload>

		<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
		 :on-success="imgSuccess" :before-upload="beforUpload" name="templateFile">
			<img v-if="imageUrl" :src="imageUrl" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
		<el-upload :drag="true" action="https://jsonplaceholder.typicode.com/posts/" :on-remove="removeImg" :on-preview="previewImg"
		 list-type="picture-card">
			<i class="el-icon-plus"></i>
		</el-upload>
		<!--visible.sync 是否放大-->
		<el-dialog :visible.sync="isVisible">
			<img width="100%" :src="dialogImgUrl" alt="">
		</el-dialog>
		<br>
		<br>
		<br>
		
		
		<!--:show-score="true" 显示分数-->
		<el-rate @change="getrate" v-model="rate"
		  :max="10"
		  :show-text="true"
		  :texts="['辣鸡','小辣鸡','一般','可还行','可以','满意','还不错','非常满意','完美','帝王享受']"
		  text-color="#ff9900" 
		  score-template="{value}" 
		  :allow-half="true">
		</el-rate>
    <el-color-picker v-model="color" color-format="rgb" :show-alpha="true" @change="getcolor"></el-color-picker>
	
	<el-transfer :data="city" 
	@change="getCity"
	 :props="{'label':'name','key':'id'}" 
	 filterable
	 :titles="['未选中的城市','已选中的城市']"
	 :button-texts="['向左移','向右移']"
	 :filter-method="filterMethod"
	 v-model="checkCity">
	 <el-button type="success" slot="left-footer" size="small">操作</el-button>
	 <el-span  slot="right-footer">已选中城市的列表</el-span>	
	 </el-transfer>
		
	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				checkCity:[2,3],
				color:null,
				rate: null,
				dialogImgUrl: "",
				isVisible: false,
				imageUrl: "",
				dateTime: "",
				date: "",
				picker: "",
				time: "",
				strEnd: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
				slider: 44,
				swtich: 1,
				phone: "",
				flag: true,
				sex: "1",
				job: "1",
				cheked: true,
				arry: [],
				num1: 1,
				country: [{
					label: "中国",
					value: 0
				}, {
					label: "美国",
					value: 1
				}, {
					label: "日本",
					value: 2,
					disabled: true
				}, {
					label: "澳大利亚",
					value: 3
				}],
				value: "",
				value10: [],
				activeAddress: [],
				address: [{
					id: 1,
					name: "浙江省",
					children: [{
						id: 101,
						name: "嘉兴市",
						children: [{
							id: 10101,
							name: "南湖区"
						}, {
							id: 10102,
							name: "秀洲区",
							disabled: true
						}, {
							id: 10103,
							name: "平湖区"
						}]
					}, {
						id: 102,
						name: "杭州市",
						children: [{
							id: 10201,
							name: "西湖区"
						}, {
							id: 10202,
							name: "上城区"
						}, {
							id: 10203,
							name: "下城区"
						}]
					}]
				}, {
					id: 2,
					name: "湖南省",
					children: [{
						id: 201,
						name: "长沙市",
						children: [{
							id: 20101,
							name: "岳麓区"
						}, {
							id: 20102,
							name: "雨花区"
						}, {
							id: 20103,
							name: "芙蓉区"
						}]
					}, {
						id: 202,
						name: "衡阳市",
						children: [{
							id: 20201,
							name: "蒸湘区"
						}, {
							id: 20202,
							name: "石鼓区"
						}]
					}]
				}],
				 city:[{
					 id:0,
					 name:"嘉兴",
					 disabled:false,
					 pinyin:"jiaxin"
				 },{
					 id:1,
					 name:"北京",
					 disabled:false,
					 pinyin:"beijing"
				 },{
					 id:2,
					 name:"上海",
					 disabled:true,
					 pinyin:"shanghai"
				 },{
					 id:3,
					 name:"杭州",
					 disabled:false,
					 pinyin:"hangzhou"
				 }],

				filterMethod(query, item){
					return item.pinyin.includes(query);
				
				},
				pickerOptions1: {
					// 					disabledDate(time) {
					// 						return time.getTime() > Date.now();
					// 					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				}
			}
		},
		components: {

		},
		methods: {
			checkphone() {

				let chekphone = /^1[345789]\d{9}$/;
				if (chekphone.test(this.phone)) {
					this.flag = false;
				} else {
					this.flag = true;
				}
			},
			info() {
				console.log(this.arry);
			},
			num(value) {
				console.log(value);
			},
			getdata(value) {
				console.log(this.value);
				console.log(value);
			},
			getAddress(value) {
				console.log(value);
			},
			getS(value) {
				console.log(value);
			},
			getslider(value) {
				console.log(value);
			},
			getTime(value) {
				console.log(value);
			},
			//文件上传的回调
			preview(file) {
				//文件上传有两种方式
				//一种是随着一起提交，耗时慢，用户体验不好，不过性能不会消耗太多
				//第二种：先上传文件，再返回url地址，
				//再表单提交，用户体验好，但是性能消耗多。
				//获取文件详情的回调函数
				console.log("开始上传的")
				console.log(file);
			},
			remove(file, fileList) {
				//删除文件的后的回调函数
				console.log("删除以后的")
				console.log(file);
				console.log(fileList);
			},
			beforeRemove(file, fileList) {
				//删除文件前的回调函数
				console.log("删除以前的")
				console.log(file);
				console.log(fileList);
				return this.$confirm(`你确定要删除${file.name}`);
			},
			uploadSuccess(res, file, fileList) {
				console.log("文件上传成功的")
				console.log(res);
			},
			uploadError(error, file, fileList) {
				alert("服务器连接失败");
			},
			getLength(files, fileList) {
				//超过上传限制的回调
				this.$message.warning(
					`文件上传数量不得超过3个,
				              本次选择了${files.length}个文件
				        ,共${files.length+fileList.length}`);
			},
			//图片上传的回调函数
			beforUpload(file) {
				//图片上传前的回调
				let arry = ["image/jpg", "image/jpeg"];
				const flag = arry.includes(file.type);
				if (!flag) {
					this.$message.error("上传的文件不符合格式");
				}
				//返回是b
				const size = file.size / 1024 / 1024 < 2;
				if (!size) {
					this.$message.error("上传的文件大小不得超过2M");
				}
				return flag && size;
			},
			imgSuccess(res, file) {

				//图片上传成功的回调
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			//多图上传
			removeImg(file, fileList) {
				this.$message.success("删除成功");
			},
			previewImg(file) {
				this.isVisible = true;
				this.dialogImgUrl = file.url;
			},
			//评分
			getrate(value){
				console.log(value);
			},
			getcolor(value){
				console.log(value);
			},
			getCity(value,direction,movedKeys){
				console.log(value);
				console.log(direction);
				console.log(movedKeys);
			}
			
			

		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
